<template>
  <div class='container'>
    <el-dialog
  title="题目预览"
  :visible="dialogVisible"
  width="900px"
  @close="handleClose"
  >
  <el-row class="text">
  <el-col :span="6">
    <span v-if="questionItem.questionType === '1'">【题型】：单选题</span>
    <span v-else-if="questionItem.questionType === '2'">【题型】：多选题</span>
    <span v-else>【题型】：简答题</span>
  </el-col>
  <el-col :span="6">
    <span>【编号】： {{ questionItem.id }}</span>
  </el-col>
  <el-col :span="6">
    <span v-if="questionItem.difficulty=== '1'">【难度】：简单</span>
    <span v-else-if="questionItem.difficulty=== '2'">【难度】：一般</span>
    <span v-else>【难度】：困难</span>
  </el-col>
  <el-col :span="6">
    <span>【标签】：{{questionItem.tags }}</span>
  </el-col>
</el-row>
<!-- ====+++++++++++++++++++ -->
<el-row class="text" style="margin:20px 0;">
   <el-col :span="6">
          <span>【学科】：{{ questionItem.subjectName }}</span>
        </el-col>
        <el-col :span="6">
          <span>【目录】：{{ questionItem.directoryName }}</span>
        </el-col>
        <el-col :span="6">
          <span>【方向】：{{ questionItem.direction }}</span>
        </el-col>
        <el-col :span="6"> </el-col>
</el-row>
<hr />
<!-- 题干++++++++++++++++ -->
<el-row>
  <el-col :span="6">
    <span>【题干】：</span>
  </el-col>
</el-row>
<el-row>
  <el-col style="color: blue;">
    <span v-html="questionItem.question"></span>
  </el-col>
</el-row>
<el-row>
  <el-col>
     <span>
      <span v-if="questionItem.questionType === '1'">单选题</span>
    <span v-else-if="questionItem.questionType === '2'">多选题</span>
    <!-- <span v-else>简答题</span> -->
     选项：（以下选中的选项为正确答案）
     </span>
  </el-col>
</el-row>
<!-- 单选框 -->
   <el-radio-group v-model="radio"  v-if="questionItem.questionType === '1'" @change="change">
    <el-row v-for="item in questionType.options" :key="item.id" style="margin:10px 0px">
      <el-radio :label="item.isRight">{{ item.title }}</el-radio>
    </el-row>
  </el-radio-group>

<!-- 多选框 -->
 <div v-if="questionItem.questionType === '2'">
   <el-row v-for="(item,index) in options" :key="index" style="margin:10px 0px">
     <el-checkbox
        v-model="item.isRight"
        :disabled="item.isRight==='0'"
        @change="handleChange(item)">{{ item.title }}
        </el-checkbox>
   </el-row>
  </div>
  <hr />
  <!-- ----参考答案--- -->
  【参考答案】：
  <el-button type="danger" size="small" @click="isShowVideo = !isShowVideo">视频答案预览</el-button>
  <el-row style="margin-top:15px;" v-if="isShowVideo">
   <video :src="questionItem.videoURL" controls class="video"></video>
  </el-row>
  <hr />
 <el-row type="flex" align="middle">
   <span>【答案解析】：{{ questionItem.answer }}</span>
   <!-- <span v-html="questionItem.answer"></span> -->
 </el-row>
  <hr />
  <el-row>
    <span>【题目备注】：{{ questionItem.remarks }} </span>
  </el-row>
<!-- 底部==++++++++++++++ -->
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="handleClose">关闭</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 答案解析视频是否显示
      isShowVideo: false,
      radio: 1
    }
  },
  props: {
    questionItem: {
      type: Object,
      required: true
    },
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 关闭功能
    handleClose () {
      this.$emit('update:dialogVisible', false)
    },
    //  单选框
    change () {
      this.radio = 1
    },
    // 多选框的点击事件
    handleChange (item) {
      if (item.isRight) {
        console.log(item.isRight)
      } else {
        item.isRight = true
      }
    }
  },
  computed: {
    options () {
      // 多选
      if (this.questionItem.questionType === '2') {
        if (!this.questionItem.options) {
          return
        }
        // 遍历传递过来的数据
        this.questionItem.options.forEach(item => {
          if (item.isRight === 1) {
            // 改为true 多选框就会默认选择
            item.isRight = true
          }
        })
        // 修改完成之后
        return this.questionItem.options
      } else {
        // 不是单选 原路返回题目项
        return this.questionItem.options
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  .video {
    width: 400px;
  }
  .answer {
    padding: 8px 0px;
  }
  .el-row {
    .el-col {
      span {
        font-size: 14px;
        color: #606266;
        line-height: 36px;
      }
    }
  }
}</style>
